<!DOCTYPE html>
<html lang="en">
<head>
    <title>忘记密码</title>
    <%- include('../../_global/baseLibs') %>
    <script src="/quickJs/scripts/common/md5.js"></script>
    <link rel="stylesheet" href="/static/css/login.css"/>
    <style>
        #btnFindPwd{
            margin-top:5rem;
        }
        .sendyzm{
            display: block;
            height: 2rem!important;
            line-height:2rem!important ;
            border-radius: 5px;
            width: 30%;
            color: #ffffff !important;
            text-align: center!important;
            border: none;
            outline: none;
        }
        .blue{
            background: #0db9ff;
            color:#fff;
        }
        .gray{
            color:#fff;
            background: #ddd;
        }

    </style>
</head>
<body>
<section class="page-wrap page-user-info">

    <!-- header start -->
    <header class="header-box grey fixed">
        <div class="header-content">
            <div class="left-tool">
                <a class="back" href="#"><i class="iconfont icon-back"></i></a>
            </div>
            <div class="title">忘记密码</div>
        </div>
    </header>
    <!-- header end -->

    <section class="login-content">
        <!--<aside class="logo"></aside>-->
        <aside class="login-form-box">
            <form id="formFindPwd" autocomplete="off">
                <ul class="login-form resister">
                    <li>
                        <input id="userName"  class="input-text form-control" placeholder="请输入手机号" value=""
                               autocomplete="false"  quick-config="label:'请输入手机号', validateProxy:'notNull validPhone'" name="username">
                        <i class="icon-form-tool icon-form-close" style="display: none"></i>
                    </li>
                    <li>
                        <input id="YZM" class="input-text form-control VerificationCode" placeholder="输入验证码" value="" name="code" autocomplete="false"
                               quick-config="label:'验证码', validateProxy:'notNull length', length: '6'" >
                        <input id="code_key" style="display: none;" name="code_key">
                        <!--<a id="btnSendCode" class="send-code " href="javascript:void(0);">发送验证码</a>-->
                        <button class="sendyzm blue send-code" id="btnSendCode">获取验证码</button>
                    </li>
                    <li>
                        <input id="passWord" class="input-text form-control" placeholder="设置密码，6-20 位字母或数字" type="password" value="" autocomplete="false"
                               quick-config="label:'密码', validateProxy:'notNull validPwd'" >
                        <input id="hexPwd" name="password" style="display: none;">
                        <i id="changePasState" class="icon-form-tool icon-eyes"></i>
                    </li>
                    <li>
                        <input  id="passWord2" class="input-text" placeholder="再次输入密码" type="password" value="" autocomplete="false">
                        <i id="changePasState2" class="icon-form-tool icon-eyes"></i>
                    </li>
                </ul>
            </form>
            <div class="tool-box">
                <div>
                    <a id="btnFindPwd" class="button button-primary" href="javascript:void(0);">找回密码</a>
                </div>
            </div>
        </aside>
    </section>
</section>

<script>

    var page_forgetPwd = (function($, page_forgetPwd) {
        /*短息服务*/
        var uri_service_sendMsg = '/api/gzd/ignore/sendMessage';
        /*忘记密码*/
        var uri_service_register = '/api/gzd/ignore/forgetPassword';
        var wait=61, timeOut;
        /*短信验证码key*/
        var code_key = "code_key";

        var cfg_def = {
            forgetPwdParams: forgetPwdParams
        }

        page_forgetPwd.init = function(cfg){
            $.extend(page_forgetPwd, cfg_def, cfg);
            $("#formFindPwd").attr('action', uri_service_register);
            $("#userName").on('focus',function(){
                $(this).parent().find('.icon-form-close').show();
            });
            $("#userName").on('blur',function(){
                if($(this).val()!=""&&$(this).val()!=undefined){
                    $(this).parent().find('.icon-form-close').show();
                }else{
                    $(this).parent().find('.icon-form-close').hide();
                }
                validPhone($(this).val());
            });

            $("#passWord").on('blur',function(){
                validPhone($(this).val());
            });

            $(".icon-form-close").on('click',function(){
                $(this).parent().find('.input-text').val("");
            });

            $("#changePasState").click(function(){
                if($(this).hasClass('active')){
                    $(this).removeClass('active');
                    $('#passWord').attr('type','password');
                }else{
                    $('#passWord').attr('type','text');
                    $(this).addClass('active');
                }
            })
            $("#changePasState2").click(function(){
                if($(this).hasClass('active')){
                    $(this).removeClass('active');
                    $('#passWord2').attr('type','password');
                }else{
                    $('#passWord2').attr('type','text');
                    $(this).addClass('active');
                }
            })
            $("#userName").trigger("focus");
            $("#btnFindPwd").on("click", btnFindPwdClickHandler);
            $(".icon-back").on("click", btnBakClickHandler);

            //发送验证码
            $("#btnSendCode").on("click",function (e) {
                e.preventDefault();
                var result = validPhone($("#userName").val());
                if(!StringUtils.isEmpty(result)){
                    $.QuickAlert.alertFail({
                        content: result
                    });
                }else{
                    sendCode();
                }
            })
        }

        function sendCode() {
            $.QuickRemote.AjaxJson({
                funcName: uri_service_sendMsg
                ,params: {phone: $("#userName").val()}
                ,callback: function(data){
                    layer.open({
                        content: '验证码发送成功！有效时间' + data['timeout'] + '分钟'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                        ,end: function(){
                            timeMins();
                        }
                    });
                    /*缓存全局的验证码key值*/
                    $("#code_key").val(data['key']);
                }
            });
        }
        //时间倒计时
        function timeMins() {
            var sendButton = $("#btnSendCode");
            if (wait == 1) {
                sendButton.html("获取验证码");
                sendButton.removeClass("gray").addClass("blue");
                clearTimeout(timeOut);
                sendButton.attr("disabled",false);
                wait = 61;
            } else {
                wait--;
                timeOut = setTimeout(function () {
                    timeMins();
                }, 1000);
                sendButton.html(wait + "s");
                sendButton.attr("disabled",true);
                sendButton.removeClass("blue").addClass("gray");
            }
        }

        /*注册接口回调*/
        function btnFindPwdClickHandler(){
            findPwd();
        }
        function findPwd(){
            if($(".form-control").QuickValidate())
            {
                $("#hexPwd").val(hex_md5($("#passWord").val()));
                var params = {};
                params = page_forgetPwd.forgetPwdParams();
                $.QuickRemote.AjaxFiledFormSubmit({
                    formId: "formFindPwd"
                    ,callback: findPwdHandler
                    ,params: params
                });
            }
        }
        function findPwdHandler(result){
            $.QuickAlert.alertNormal("找回密码成功", {callback: function(){
                btnBakClickHandler();
            }});
        }

        function forgetPwdParams(){
            return {};
        }

        /*返回*/
        function btnBakClickHandler(){
            $.QuickUrlUtils.reBackAndRefreshJSBridge();
        }

        return page_forgetPwd;
    })(jQuery, {});

    /*验证手机号*/
    function validPhone(value){
        var reg = /^1[3|4|5|7|8|9][0-9]{9}$/;
        if(!reg.test(value)){
            return '请输入正确的手机号';
        }
    }
    /*验证密码*/
    function validPwd(value){
        var patrn=/^(\w){6,20}$/;
        if(!patrn.exec(value)){
            return '密码由6-20位数字、字母或下划线组成！'
        }else{
            var pwd2 = $("#passWord2").val();
            if(value != pwd2){
                return "两次输入的密码不同";
            }
        }
    }
</script>
</body>
</html>